<!--
  功能：定位
  作者：licy
  邮箱：licy@briup.com
  时间：2021年01月06日 17:13:32
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class=''>
     <!-- 高德地图容器 -->
    <div id="map_location" style="height:500px"></div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
   return {
     hospital:{},
     map:null
   }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 初始化地图
    initMap(){
      // 创建地图实例
      var map = new AMap.Map('map_location', {
          zoom:11,//级别
          center: [117.077041,33.633096],//中心点坐标
          viewMode:'3D'//使用3D视图
      });
      this.map = map;
      // 创建点
      var marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: [this.hospital.longitude,this.hospital.latitude],
          offset: new AMap.Pixel(-13, -30)
      });
      //将创建好的点打到地图上
      marker.setMap(map);

      // 弹出创图
      //构建信息窗体中显示的内容
      this.openInfoWindow();
    },
    openInfoWindow(){
      var info = [];
      info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
      info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>"+this.hospital.name+"</h4>");
      info.push("<p class='input-item'>电话 : "+this.hospital.phone+"   邮编 : 100102</p>");
      info.push("<p class='input-item'>地址 :"+this.hospital.province+""+this.hospital.city+"</p></div></div>");

      var infoWindow = new AMap.InfoWindow({
          content: info.join("")  //使用默认信息窗体框样式，显示信息内容
      });

      infoWindow.open(this.map, this.map.getCenter());
    }
  },
  // 以下是生命周期钩子
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
    this.hospital = this.$route.query;
    // 渲染地图
    this.initMap();
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy () {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>

</style>